
<template>
  <div class="tel_band_box">
    <div class="box_top">
      <div class="box_t_l" @click="goIndex"><img src="./../../assets/img/return.png" alt=""></div>
      <div class="box_t_c">绑定手机号</div>
      <div class="box_t_r"></div>
    </div>
    <div class="tel_con">
      <div class="tel">
        <div class="tel_l">
          中国（+86）
        </div>
        <div class="tel_r">
          <input type="tel" placeholder="请输入手机号" v-model="phoneNumbers">
        </div>
      </div>
      <div class="tel_code">
        <div class="tel_code_l">验证码</div>
        <div class="tel_code_c"><input type="text" placeholder="请输入验证码" v-model="code"></div>
        <div class="tel_code_r" v-if="timer==0" @click="sendMessage">发送验证码</div>
        <div class="tel_code_r" v-else style="width:120px;">({{timer}})秒后重发</div>
      </div>
      <div class="tel" style="justify-content: flex-start">
        <div class="tel_l" style="width:21%">
          姓名
        </div>
        <div class="tel_r" style="width:75%">
          <input type="text" placeholder="请输入您的姓名" v-model="name">
        </div>
      </div>
      <div class="btn" @click="complete">
        完成
      </div>
    </div>
  </div>
</template>

<script>
import { sendMsg, register } from '@/api/allapis'
import Lockr from 'Lockr'
export default {
  data () {
    return {
      phoneNumbers: '',
      code: '',
      timer: 0,
      count: 60,
      verify: '', // 接受传过来的code
      name: ''
    }
  },

  components: {},

  computed: {},

  mounted () {},

  methods: {
    goIndex () {
      this.$router.replace({ name: 'index' })
    },
    sendMessage () {
      if (this.timer > 0) {
        return false
      }
      if (this.phoneNumbers === '') {
        // alert('请输入您的手机号')
        this.$vux.alert.show({
          title: '人人同行提示',
          content: '请输入您的手机号',
          buttonText: '好的',
          hideOnBlur: true,
          maskZIndex: 100
        })
        return
      }
      if (!(/^1\d{10}$/.test(this.phoneNumbers))) {
        // alert('手机号有误，请重新输入！')
        this.$vux.alert.show({
          title: '人人同行提示',
          content: '手机号有误，请重新输入！',
          buttonText: '好的',
          hideOnBlur: true,
          maskZIndex: 100
        })
        return
      }
      var tenp_count = this.count
      this.timer = tenp_count
      var self = this
      var countimer = setInterval (function () {
        if (self.timer === 0) {
          clearInterval(countimer)
          return false
        } else {
          self.timer = self.timer - 1
        }
      }, 1000)
      sendMsg({ phoneNumbers: this.phoneNumbers }).then(res => {
        if (res.code === 200) {
          // alert(res.data)
          this.$vux.alert.show({
            title: '人人同行提示',
            content: res.data,
            buttonText: '好的',
            hideOnBlur: true,
            maskZIndex: 100
          })
        } else {
          this.$vux.alert.show({
            title: '人人同行提示',
            content: res.data,
            buttonText: '好的',
            hideOnBlur: true,
            maskZIndex: 100
          })
          // alert(res.data)
        }
      })
    },
    complete () {
      let params = {
        code: this.code,
        name: this.name,
        openid: this.$store.getters.getOpenid
      }
      register(params).then(res => {
        if (res.data === '注册成功') {
          this.$vux.alert.show({
            title: '人人同行提示',
            content: res.data,
            buttonText: '好的',
            hideOnBlur: true,
            maskZIndex: 100
          })
          Lockr.set('vertify', true)
          this.$router.go(-1)
        } else {
          this.$vux.alert.show({
            title: '人人同行提示',
            content: res.data,
            buttonText: '好的',
            hideOnBlur: true,
            maskZIndex: 100
          })
          this.$router.go(-1)
        }
      })
    }
  }
}

</script>
<style lang='less' scoped>
  @import url('./telBand.less');
</style>